<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>考勤上传</title>
    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { background: #f8f9fa; font-size: 1.1rem; }
        .upload-container { max-width: 500px; margin: 30px auto; padding: 1.2rem; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        @media (max-width: 600px) {
            .upload-container { max-width: 98vw; margin: 10px 1vw; padding: 0.7rem; }
            h2, .h2 { font-size: 1.3rem; }
            body { font-size: 1rem; }
            .navbar-brand { font-size: 1.1rem; }
            .form-control, .btn, .form-text { font-size: 1rem; }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">逐光帮会管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link" href="/attendance_table">总考勤表</a></li>
                    {% if logged_in %}
                    <li class="nav-item"><a class="nav-link active" href="/">考勤上传</a></li>
                    <li class="nav-item"><a class="nav-link" href="/jielong_admin">接龙任务管理</a></li>
                    <li class="nav-item"><a class="nav-link" href="/jielong/history">接龙历史</a></li>
                    {% endif %}
                </ul>
                <div class="d-flex">
                    {% if logged_in %}
                    <a class="btn btn-outline-secondary me-2" href="/logout">退出登录</a>
                    {% else %}
                    <a class="btn btn-outline-primary" href="/login">管理登录</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>
    <div class="upload-container">
        <h2 class="mb-4 text-center">上传本周考勤CSV/Excel（可多选）</h2>
        <div class="alert alert-info" role="alert">
            <b>上传说明：</b><br>
            1. <b>活动日期格式</b>: <code>日期</code>列的格式必须为 <code>MM-DD-YYYY</code> (例如 <code>07-16-2025</code>)，否则数据会被过滤。<br>
            2. <b>帮众名单上传</b>: 类型为 <code>帮众名单</code> 的记录，<code>备注</code> 列 <b>必须填写成员的入帮日期</b> (格式：<code>YYYY-MM-DD</code> 或 <code>MM-DD-YYYY</code>)。<br>
            3. <b>活动考勤上传</b>: 活动类型仅支持 <code>接龙</code>, <code>帮战1</code>, <code>帮战2</code>。对于这些活动，<code>备注</code> 列用于标记状态，仅支持四个选项：<code>参与</code>, <code>请假</code>, <code>替补</code>, <code>缺勤</code>。如果备注留空，系统将默认为 <code>缺勤</code>。<br>
            4. <b>必须包含列</b>: <code>玩家名称</code>, <code>职业</code>, <code>日期</code>, <code>类型</code>, <code>备注</code>。<br>
            5. 可下载 <a href="/static/attendance_sample.csv" target="_blank">示例CSV文件</a> 作为模板。<br>
            6. 支持批量上传 csv、xlsx、xls 文件。
        </div>
        {% if error %}
        <div class="alert alert-danger" role="alert">{{ error }}</div>
        {% endif %}
        {% if success %}
        <div class="alert alert-success" role="alert">{{ success }}</div>
        {% endif %}
        {% if logged_in %}
        <form action="/upload_attendance" method="post" enctype="multipart/form-data">
            <div class="mb-3">
                <input type="file" class="form-control" name="file" accept=".csv,.xlsx,.xls" multiple required>
                <div class="form-text">支持批量上传csv、xlsx、xls文件</div>
            </div>
            <button type="submit" class="btn btn-primary w-100">上传</button>
        </form>
        <a class="btn btn-outline-secondary w-100 mt-3" href="/logout">退出登录</a>
        {% else %}
        <a class="btn btn-outline-primary w-100" href="/login">管理登录</a>
        {% endif %}
        <hr>
        <a class="btn btn-link w-100" href="/attendance_table">查看总考勤表</a>
    </div>
</body>
</html>
